<template>
  <component :is="blockMaterial" :block="block"></component>
</template>

<script setup lang="ts">
import { computed } from 'vue';

import ChartBlock from '@/blocks/internal/ChartBlock.vue';
import FallBackBlock from '@/blocks/internal/FallBackBlock.vue';
import ImageBlock from '@/blocks/internal/ImageBlock.vue';
import TextBlock from '@/blocks/internal/TextBlock.vue';
import type {Block} from '@/types/Block';
// type BlockType="text"|"image"|"chart"

// const type:BlockType="chart";

const props=defineProps<{block:Block}>()

const blockMaterial=computed(()=>{
  switch(props.block.type){
    case "text":
      return TextBlock;
    case "image":
      return ImageBlock;
    case "chart":
      return ChartBlock;
    default:
      return FallBackBlock;    
}
})



</script>

<style scoped>

</style>
